<template>
  <div>
    <img :src="$pre + info.img" alt="" />
    <div class="h2">name:{{ info.goodsname }}</div>
    <div class="p">price:{{ info.price }}</div>
    <div v-html="info.description"></div>

   

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车"  @click="$router.push('/index/shop')"  />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addShop" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { reqcartadd, reqdetail } from "../../http/http";
import {Toast} from "vant"
export default {
  data() {
    return {
      // 1.初始化数据
      info: {},
    };
  },
  mounted() {
    // 2.请求数据
    reqdetail({
      id: this.$route.params.id,
    }).then((res) => {
      this.info = res.data.list[0];
      // 规格的属性值
      this.info.specsattr = this.info.specsattr.split(",");
    });
  },
  methods: {
    // 加入购物车车
    addShop() {
      reqcartadd({
        uid: JSON.parse(localStorage.getItem("isLogin")).uid,
        goodsid: this.$route.params.id,
        num: 1,
      }).then((res) => {
        if (res.data.code == 200) {
          Toast(res.data.msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../less/index.less";
img {
  width: 100vw;
}
</style>